<!-- <script setup>
	import Index from './page/index.vue';
</script>

<template>
	<div>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="success">成功按钮</van-button>
		<van-button type="default">默认按钮</van-button>
		<van-button type="warning">警告按钮</van-button>
		<van-button type="danger">危险按钮</van-button>
		<div class="test">asdfasdf</div>
		<Index></Index>
	</div>
</template>
 -->

<script setup>
import { FiveProvider } from '@realsee/five/vue'
import work from '@realsee/open-works/virtual/81gmMq5a7zbF9leWMk/work.json'
import GuideLinePlugin from '@realsee/dnalogel/libs/GuideLinePlugin'
import ModelRoomLabelPlugin from '@realsee/dnalogel/libs/ModelRoomLabelPlugin'
import CruisePlugin from '@realsee/dnalogel/libs/CruisePlugin'
import { onMounted, ref, provide } from 'vue'
import ResponsiveFiveCanvas from './components/ResponsiveFiveCanvas.vue'
import ToggleFiveModeButton from './components/ToggleFiveModeButton.vue'

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const fiveInitArgs = {
	imageOptions: {
		// 初始512开启动态瓦片加载，可提升点位加载速度
		size: 512,
	},
	textureOptions: {
		// 关闭模型贴图自动缩放，加载高精度模型贴图，
		// 注意，低性能的机器大模型场景容易崩溃
		autoResize: false,
	},
	plugins: [
		[
			GuideLinePlugin,
			'guideLinePlugin', // 路径引导自定义插件名称
		],
		[
			CruisePlugin,
			'cruisePlugin', // 路径漫游自定义插件名称
		],
		[
			ModelRoomLabelPlugin,
			'modelRoomLabelPlugin', // 模型分间标签自定义插件名称
		],
	],
}
const five = ref(null)
provide('fiveInstance', five) // 提供 'fiveInstance' 实例
// 模型分间标签节点
const pluginContainer = ref(null)
onMounted(() => {
	const pluginInstance = five.value.five.plugins.guideLinePlugin
	// 自定义路径数据
	const guideLineServerData = [
		{
			panoIndexList: [1, 2, 3, 4, 3, 2, 1],
			// arrowTextureUrl: '', // 自定义路径箭头icon
		},
	]
	pluginInstance.load({ routes: guideLineServerData }, { visible: true })

	// 漫游
	const currentGuideLine = [1, 2, 3, 4, 3, 2, 1]
	const cruisePlugin = five.value.five.plugins.cruisePlugin
	cruisePlugin.load({
		panoIndexList: currentGuideLine,
		moveToFirstPanoEffect: 'montage',
		stay: 1000,
	})
	mountedFJNode()
})
// 挂载模型分间标签节点
const mountedFJNode = () => {
	const wrapper = pluginContainer.value
	if (wrapper) {
		five.value.five.plugins.modelRoomLabelPlugin.appendTo(wrapper)
	}
}
const disabled = ref(false)
const begin = () => {
	disabled.value = true
	const cruisePlugin = five.value.five.plugins.cruisePlugin
	cruisePlugin.play()
}
const end = () => {
	disabled.value = false
	const cruisePlugin = five.value.five.plugins.cruisePlugin
	cruisePlugin.pause()
}
</script>

<template>
	<FiveProvider class="box" ref="five" :fiveInitArgs="fiveInitArgs" :initialWork="work">
		<ResponsiveFiveCanvas />
		<ToggleFiveModeButton />
		<!-- 分间标签挂载节点 -->
		<div ref="pluginContainer" :style="`position: absolute, top: 0, left: 0, width: 1200px, height: 1000px, pointerEvents: none`" />
		<div class="btns">
			<van-button type="primary" @click="begin" :disabled="disabled">开始漫游</van-button>
			<van-button type="danger" @click="end" :disabled="!disabled">结束漫游</van-button>
		</div>
	</FiveProvider>
</template>
<style lang="scss" scoped>
.btns {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10001;
	padding: 0 10px;
	height: 30px;
}
.box {
	position: relative;
	width: 1200px;
	height: 1000px;
	margin: 0 auto;
}
</style>
